<template>
	<view>
		<view class="g_header">
			<view class="g_h_box">
				<text class="g_title">{{empName}}</text>
				<view class="g_f_box">
					<text class="g_time">{{date}} 行程轨迹</text>
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input sle_time">查看其他时间</view>
					</picker>
				</view>
			</view>
		</view>
		<time-line ref="timeline" location="center" title="XX学生的轨迹" :showList="showList" :time="date" :orgId="orgId" :empId="empId"></time-line>
	</view>
</template>

<script>
	import {trailList} from '../../common/api/index.js'
	import timeLine from '../../components/timeline.vue'
	export default {
		onLoad:function(option){
			this.orgId = option.orgId
			this.empId = option.empId
			this.empName = option.empName
		},
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				date: currentDate,
				time:0,
				isclick:true,
				orgId: '',
				empId: '',
				showList: false,
				trailList: [],
				empName: ''
			}
		},
		onPageScroll() {
			if(this.isclick){
				this.timer();
				this.$refs.timeline.getScroll();
			}
		},
		components:{
			timeLine
		},
		methods: {
			timer() {
				if(this.time>0){
					this.isclick=false;
					this.time--;
					setTimeout(this.timer,2)
				}
				else{
					this.isclick=true;
					this.time=10
				}
			},
			bindDateChange: function(e) {
			    this.date = e.target.value
				this.date = this.date.toString().replace(/\//g, "-")
				this.showList = !this.showList
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}
	.g_header {
		width: 100vw;
		height: 300rpx;
		background-image: url('');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		position: relative;
		.g_h_box {
			background: linear-gradient(180deg, #F9FCFF 0%, #EDEFFF 100%);
			border-radius: 16rpx 16rpx 0px 0px;
			width: 85%;
			height: 150rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 20rpx 30rpx;
			.g_title {
				font-size: 30rpx;
				font-family: "PingFangSC-Semibold, PingFang SC";
				font-weight: 600;
				color: #3C424F;
			}
			.g_f_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.g_time {
					font-size: 28rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #3C424F;
				}
				.sle_time {
					font-size: 28rpx;
					font-family: "PingFang-SC-Medium, PingFang-SC";
					font-weight: 500;
					color: #185AFF;
					padding: 8rpx 30rpx;
					border-radius: 26rpx;
					border: 1px solid #185AFF;
					color: #169BD5;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>